<style>
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-form-item__label{
        font-size: 12px;
    }
    .el-card__body{
        height: 300px;
    }
    .el-alert__title{
        font-size: 15px;
        font-weight: bold;
        color: #0a0a0a;
    }
    .elform-span{
        font-size: 12px;
        color: #606266
    }
</style>
<div id="twbLogisticApp" v-cloak>
<el-dialog
        :title="title"
        :visible.sync="twbLogisticVisible"
        fullscreen
        >

    <!-- 订单信息 start -->
    <el-row>
        <el-alert
                title="订单信息"
                type="info"
                :closable="false">
        </el-alert>
    </el-row>
    <el-row>
        <el-col :gutter="20">
            <el-col :span="4" ><div>订单号：{{orderInfo.orderNo}}</div></el-col>
            <el-col :span="4"><div>订单总金额：{{orderInfo.totalAmount}}</div></el-col>
        </el-col>
    </el-row>
    <el-row>
        <el-table border stripe ref="multipleTable" :data="orderItemList"
                  tooltip-effect="dark" size="mini">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="addon" label="规格/尺寸/材质/工艺" show-overflow-tooltip></el-table-column>
            <el-table-column prop="amount" label="商品金额" ></el-table-column>
            <el-table-column prop="itemRemark" label="备注" ></el-table-column>
        </el-table>
    </el-row>
    <!-- 订单信息 start -->

    <div style="margin-bottom: 30px;"></div>

    <!-- 发货信息  start -->
    <el-row>
        <el-alert
                title="发货信息"
                type="info"
                :closable="false">
        </el-alert>
    </el-row>
    <el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-card class="box-card" shadow="never">

                        <el-row>
                            <el-col><div class="grid-content bg-purple">
                                <el-button type="text" size="medium" style="font-size: 13px;font-weight: bold;color: #0a0a0a">物流信息</el-button>
                            </div></el-col>
                        </el-row>

                        <el-form label-width="100px" :rules="rules" ref="erpLogistic" :model="erpLogistic" size="mini">
                            <el-form-item label="物流方式：" prop="logisticsId">
                                <el-select v-model="erpLogistic.logisticsId" @change="logiTypeChange" filterable placeholder="请选择">
                                    <el-option v-for="item in logisticsTypeList"
                                               :key="item.logisticsId"
                                               :label="item.logisticsName"
                                               :value="item.logisticsId"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="物流单号：">
                                <el-input v-model="erpLogistic.logiNo" placeholder="请输入物流单号"></el-input>
                            </el-form-item>
                            <el-form-item label="物流费用：" prop="logiCost">
                                <el-input v-model.number="erpLogistic.logiCost" placeholder="请输入物流费用"></el-input>
                            </el-form-item>
                            <el-form-item label="物流备注：">
                                <el-input v-model="erpLogistic.logiRemark" placeholder="请输入物流备注"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="grid-content bg-purple">
                        <el-card class="box-card" shadow="never">

                            <el-row>
                                <el-col :span="12"><div class="grid-content bg-purple">
                                    <el-button type="text" size="medium" style="font-size: 13px;font-weight: bold;color: #0a0a0a">收货人地址</el-button>
                                </div></el-col>
                                <el-col :span="12"><div class="grid-content bg-purple" style="text-align: right">
                                    <el-button type="text" @click="receiverFormVisable = true" v-show="!receiverFormVisable">编辑</el-button>
                                    <el-button type="text" @click="receiverFormReset" v-show="receiverFormVisable">取消</el-button>
                                    <el-button type="text" @click="receiverFormSave">保存</el-button>
                                </div></el-col>
                            </el-row>

                            <el-form label-width="100px" :rules="rules" ref="receiverForm" :model="receiverForm" size="mini">
                                    <template v-if="receiverFormVisable">
                                        <el-form-item label="收货人：" prop="toPeople">
                                            <el-input v-model.trim="receiverForm.toPeople"></el-input>
                                        </el-form-item>
                                        <el-form-item label="联系方式：" prop="toPhone">
                                            <el-input v-model.trim="receiverForm.toPhone"></el-input>
                                        </el-form-item>
                                        <el-form-item label="收货地址：" prop="toAreaId">
                                            <el-cascader v-model="receiverForm.areaCascader" placeholder="试试搜索：武汉市" size="small" filterable
                                                         style="width: 100%"
                                                         :options="regionOptions"
                                                         @change="receiverFormRegionChange">
                                            </el-cascader>
                                        </el-form-item>
                                        <el-form-item label="详细地址：">
                                            <el-input v-model.trim="receiverForm.toAddress"></el-input>
                                        </el-form-item>
                                    </template>
                                    <template v-else>
                                        <el-form-item label="收货人：" prop="toPeople">
                                            <span class="elform-span">{{receiverForm.toPeople}}</span>
                                        </el-form-item>
                                        <el-form-item label="联系方式：" prop="toPhone">
                                            <span class="elform-span">{{receiverForm.toPhone}}</span>
                                        </el-form-item>
                                        <el-form-item label="收货地址：" prop="toAreaId">
                                            <span class="elform-span">{{receiverForm.toArea}}</span>
                                        </el-form-item>
                                        <el-form-item label="详细地址：">
                                            <span class="elform-span">{{receiverForm.toAddress}}</span>
                                        </el-form-item>
                                    </template>
                                </el-form>

                        </el-card>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="grid-content bg-purple">
                        <el-card class="box-card" shadow="never">

                            <el-row>
                                <el-col :span="12"><div class="grid-content bg-purple">
                                    <el-button type="text" size="medium" style="font-size: 13px;font-weight: bold;color: #0a0a0a">发货人地址</el-button>
                                </div></el-col>
                                <el-col :span="12"><div class="grid-content bg-purple" style="text-align: right">
                                    <el-button type="text" @click="shipperFormVisable = true" v-show="!shipperFormVisable">编辑</el-button>
                                    <el-button type="text" @click="shipperFormReset" v-show="shipperFormVisable">取消</el-button>
                                    <el-button type="text" @click="shipperFormSave">保存</el-button>
                                </div></el-col>
                            </el-row>

                            <el-form label-width="100px" :model="shipperForm" size="mini">
                                <template v-if="shipperFormVisable">
                                    <el-form-item label="发货人：">
                                        <el-input v-model="shipperForm.fromPeople"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系方式：">
                                        <el-input v-model="shipperForm.fromPhone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="发货地址：">
                                        <el-cascader v-model="shipperForm.areaCascader" placeholder="试试搜索：武汉市" size="small" filterable
                                                     style="width: 100%"
                                                     :options="regionOptions"
                                                     @change="shipperFormRegionChange">
                                        </el-cascader>
                                    </el-form-item>
                                    <el-form-item label="详细地址：">
                                        <el-input v-model="shipperForm.fromAddress"></el-input>
                                    </el-form-item>
                                </template>
                                <template v-else>
                                    <el-form-item label="发货人：">
                                        <span class="elform-span">{{shipperForm.fromPeople}}</span>
                                    </el-form-item>
                                    <el-form-item label="联系方式：">
                                        <span class="elform-span">{{shipperForm.fromPhone}}</span>
                                    </el-form-item>
                                    <el-form-item label="发货地址：">
                                        <span class="elform-span">{{shipperForm.fromArea}}</span>
                                    </el-form-item>
                                    <el-form-item label="详细地址：">
                                        <span class="elform-span">{{shipperForm.fromAddress}}</span>
                                    </el-form-item>
                                </template>
                            </el-form>
                        </el-card>
                    </div>
                </div>
            </el-col>
        </el-row>
    </el-row>
    <el-row>
        选择快递单模板：
        <template>
            <el-radio-group v-model="expressTemplate">
                <el-radio :label="1">韵达</el-radio>
                <!--<el-radio :label="2">百世</el-radio>-->
                <el-radio :label="3">中通</el-radio>
                <el-radio :label="4">速尔</el-radio>
            </el-radio-group>
        </template>
    </el-row>
    <!-- 发货信息  end -->

    <!-- 操作按钮 -->
    <el-row style="text-align: center">
        <el-button size="small" type="primary" @click="print">打印快递单</el-button>
        <el-button size="small" type="primary" @click="saveLogistics">保存</el-button>
        <el-button size="small" @click="twbLogisticVisible = false">取消</el-button>
    </el-row>

</el-dialog>

    <zy-print-yunda  ref="zyPrintYunda">
        打印韵达组件
    </zy-print-yunda>
    <zy-print-zhongtong  ref="zyPrintZhongTong">
        打印中通组件
    </zy-print-zhongtong>
    <zy-print-suer  ref="zyPrintSuEr">
        打印速尔组件
    </zy-print-suer>

</div>
<script src="${request.contextPath}/statics/js/modules/printtwb/printZhongTongComponent.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/js/modules/printtwb/printYunDaComponent.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/js/modules/printtwb/printSuErComponent.js?_${.now?long}"></script>
<script src="${request.contextPath}/statics/js/modules/order/twbLogistic.js?_${.now?long}"></script>
